<template>
  <view class="post-item-content"
        @click="isClect ? tap() : linkTo(dataItem)">
    <view class='post-item-title'>
      <text>{{dataItem.title}}</text>
    </view>

    <view class="post-item-main">
      <view class="post-item-left-img" v-if="dataItem.firstImg">
        <image 
               class="img-info"
               :src="dataItem.firstImg"
               mode="aspectFill"></image>

      </view>

      <view class="post-item-left-info">
        <view class='left1-text'>
          <text>{{dataItem.editContent}}</text>
        </view>

      </view>
    </view>
    <view class="post-item-wrapper">
      <view class="txt-time">
        <text>{{ dataItem.sendTime }}</text>
      </view>
      <view class='left1-content'>
        <text class="left1-content-text"
              v-for="(item , index) in dataItem.subjectType_dictTextList"
              :key="index">{{item}}</text>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  name: "u-post-item",
  data() {
    return {};
  },
  props: {
    isClect: {
      type: Boolean,
      default: false,
    },
    // 背景颜色
    itemData: {
      type: Object,
      default() {
        return {
          title: "陆小凤",
          imgUrl: "https://p.ssl.qhimg.com/t0106f6b6c0a2f68a42.jpg",
          dateTime: 215635212,
          majorStr: "专业A,专业B,专业C",
          info: "三星（SAMSUNG）R ",
        };
      },
    },
    dataItem: {
      type: Object,
      default() {
        return {
          title: "陆小凤",
          imgUrl: "",
          dateTime: 215635212,
          majorStr: "专业A,专业B,专业C",
          info: "三星（SAMSUNG）R 京东微联 智能语音 教育能语音 教育资源",
          isVip: false,
          isFollow: true,
        };
      },
    },
  },
  onLoad() {},
  methods: {
    linkTo: function (dataItem) {
      this.$u.route({
        url: "pages/tabbar/tabbar-1/post-detail",
        params: {
          id: dataItem.id,
        },
      });
    },
    tap() {},
  },
  computed: {
    majorArray: function () {
      return this.itemData.majorStr.split(",");
    },
  },
};
</script>

<style lang="scss" scoped>
	@import "uview-ui/index.scss";

.post-item-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 30rpx;
  .txt-time {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #707070;
  }
  .left1-text {
    font-size: 22rpx;
    font-family: SimHei;
    font-weight: 400;
    text-align: left;
    align-self: flex-start;
    line-height: 30rpx;
    color: #949494;
    height: 173rpx;
    opacity: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    word-break: break-all;
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #707070;
    line-height: 36rpx;
  }
  .left1-content-text {
    font-size: 22rpx;
    border: 2rpx solid #21d2ff;
    opacity: 1;
    border-radius: 4rpx;
    padding: 2rpx 14rpx;

    font-size: 15rpx;
    font-family: SimHei;
    font-weight: 400;
    line-height: 21rpx;
    color: #21d2ff;
    opacity: 1;
    margin-left: 0rpx;
    transform: scale(0.833333);
    -webkit-text-size-adjust: none;
    margin-left: 10rpx;
    .left1-content-text {
      margin-left: 0 !important;
    }
  }
}
.post-item-content {
  width: 100%;
  text-align: center;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  // border-bottom: 2rpx solid #BFBFBF;
  // margin: 0rpx 40rpx;
  // padding: 20rpx 0rpx;

  .post-item-title {
    font-size: $artical-title-font;
    font-family: SimHei;
    font-weight: 400;
    line-height: 31rpx;
    padding-bottom: 20rpx;
    color: $text-color;
    opacity: 1;
    text-align: left;
  }

  .post-item-main {
    display: flex;
    flex-flow: row nowrap;
    flex-grow: 10;
    width: 100%;

    .post-item-left-img {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
			margin-right: 10px;

      .img-info {
        width: 231rpx;
        height: 173rpx;
        border-radius: 8rpx;
      }

      .txt-time {
        font-size: 15rpx; //15rpx rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx =37.5rpx;
        font-family: SimHei;
        margin-top: 14rpx;
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #707070;
      }
    }

    .post-item-left-info {
      display: flex;
      width: 100%;
      flex-flow: column nowrap;
      flex-grow: 10;
      font-size: $artical-text-font;

      .left1-text {
        font-size: 23rpx;
        font-family: SimHei;
        font-weight: 400;
        text-align: left;
        align-self: flex-start;
        line-height: 30rpx;
        color: #949494;
        // height: 173rpx;
        opacity: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        word-break: break-all;
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #707070;
        line-height: 36rpx;
      }

      .left1-content {
        display: flex;
        align-self: flex-end;

        .left1-content-text {
          border: 2rpx solid #21d2ff;
          opacity: 1;
          border-radius: 8rpx;
          padding: 8rpx 8rpx;

          font-size: 15rpx;
          font-family: SimHei;
          font-weight: 400;
          line-height: 21rpx;
          color: #21d2ff;
          opacity: 1;
          margin-left: 0rpx;
          transform: scale(0.833333);
          -webkit-text-size-adjust: none;
          .left1-content-text {
            margin-left: 0 !important;
          }
        }
      }
    }
  }
}
</style>
